<!-- 用户模块-医生详情界面 -->
<template>
	<div class="MyContainer">
		<div class="common-layout">
      <el-container>

        <!-- 上边布局：医生头像 -->
        <el-header height="200px">
            <!-- 医生头像 -->
            <div class="demo-basic--circle" style="text-align: center;">
                <div class="block">
                    <el-avatar :size="100" :src="circleUrl" />
                </div>
                <div class="doctor-name">{{ cusdoctorInfo.docName }}</div>
                <!-- <div class="info-name">用户 {{name}} 签约医生</div> -->
            </div>
        </el-header>

        <!-- 下边布局：签约医生信息，都可以从后端获取 -->
        <el-main>
          <el-descriptions title="医生信息" direction="vertical" :column="3" border>

            <el-descriptions-item label="姓名">{{ cusdoctorInfo.docName }}</el-descriptions-item>
            
            <el-descriptions-item label="性别">{{ cusdoctorInfo.docGender }}</el-descriptions-item>
    
            <el-descriptions-item label="年龄">{{ cusdoctorInfo.docOld }}</el-descriptions-item>
    
            <el-descriptions-item label="联系电话">{{ cusdoctorInfo.docPhonenum }}</el-descriptions-item>
    
            <!-- 用户可以看到医生的身份证，感觉不太合适，就不放身份证号了 -->
            <!-- <el-descriptions-item label="身份证号">4210220001245</el-descriptions-item> -->
    
            <el-descriptions-item label="所属医院">{{ cusdoctorInfo.docHospital }}</el-descriptions-item>
    
            <el-descriptions-item label="学历">{{ cusdoctorInfo.docDegree }}</el-descriptions-item>
    
            <el-descriptions-item label="一级科室">{{ cusdoctorInfo.docDepartment }}</el-descriptions-item>
    
            <el-descriptions-item label="二级科室">{{ cusdoctorInfo.docSecdepartment }}</el-descriptions-item>
    
            <el-descriptions-item label="特长">{{ cusdoctorInfo.docSpeciality }}</el-descriptions-item>
    
            <el-descriptions-item label="备注">{{ cusdoctorInfo.doctor_other }}</el-descriptions-item>
          </el-descriptions>
	

        </el-main> 
      </el-container>
    </div>
	</div>
</template>

<script setup lang="ts" name="people">
import { ref } from 'vue';
import 'cropperjs/dist/cropper.css';
import { ElMessage , ElMessageBox} from 'element-plus'
// import avatar from '../../assets/img/img.jpg';
import { getdoctorDetail } from '../../api/manager';
import { reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router';

const cusdoctorInfo = reactive({
  docName:'',
  docOld:'',
  docGender:'',
  docPhonenum:'',
  docHospital:'',
  docDegree:'',
  docDepartment:'',
  docSecdepartment:'',
  docSpeciality:'', 
  doctor_other:'',
})
const use = useRoute()

const getData = () =>{
  getdoctorDetail(use.query.id).then(res=>{ //docid
    console.log("医生信息",res.data)
    if(res.code == 200){
      //doctor数据
      var doc = res.data
      cusdoctorInfo.docName = doc.docName
      cusdoctorInfo.docGender = doc.docGender
      cusdoctorInfo.docOld = doc.docOld
      cusdoctorInfo.docPhonenum = doc.docPhonenum
      cusdoctorInfo.docHospital = doc.docHospital
      cusdoctorInfo.docDegree = doc.docDegree
      cusdoctorInfo.docDepartment = doc.docDepartment
      cusdoctorInfo.docSecdepartment = doc.docSecdepartment
      cusdoctorInfo.docSpeciality = doc.docSpeciality
      //cusdoctorInfo.doctor_other = doc
    }
    }).catch(err =>{
      console.log("请求失败")
  })
}
getData();


//头像
const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})

const { circleUrl } = toRefs(state)
//END 头像


</script>


<style scoped>

.doctor-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #000000;
}
.info-name {
	margin: 15px 0 10px;
	font-size: 20px;
	font-weight: 500;
	color: #848484;
    font-family: '微软雅黑';
}
</style>
